Vue.component('approval', {
    template: `<el-timeline>
    <el-timeline-item type="primary" v-for="(item, index) in data.filter(i=>i.Current_Node_Approver_Type!='0')" :key="index"
      :color="ResultTotal(item,index).color" :icon="icon(item.Current_Node_Approver_Type)" size="large">
      <div style="padding-bottom: 10px; display: flex;">{{item.Node_name}}
          <span v-if="ResultTotal(item,index).text">&nbsp;·&nbsp;{{ResultTotal(item,index).text}}
            <span v-show="item.userlist.length>1&&item.examineMode!='2'">({{item.userlist.filter(i=>i.Approver_Result!='').length +'/'+item.userlist.length}})</span> 
          </span>
          <span v-if="item.userlist.length>1&&item.Current_Node_Approver_Type=='1'" style="border-radius: 2px; margin-left: 10px; padding:0 2px; font-size: 12px; border: 1px solid #409EFF; color:#409EFF;">{{mark(item.examineMode)}}</span>
      </div>
      <div v-for="(ite,ind) in item.userlist" :key="ind" style="margin-bottom: 5px;">
        <div style="display: flex; align-items: center;  justify-content: space-between;">
          <div style="display: flex; align-items: center; height: 100%;">
            <div style="position: relative;">
              <img style="display: inline; width: 30px; height: 30px;" src="dataFlow/image/icon_people.png">
              <i :class="Result(ite.Approver_Result,item).icon" :style="{color:Result(ite.Approver_Result,item).color}" 
                style="background-color: #fff; border-radius: 50%; position: absolute; right: -5px; top: -5px;"></i>  
            </div>
            <span style="margin: 0 5px; font-size: 12px;">{{ite.name}}</span>
          </div>
          <span v-if="Result(ite.Approver_Result,item).text" style="font-size: 12px; color: #979797;">{{Result(ite.Approver_Result,item).text}} · {{getTime(ite.Approver_Time)}}</span>
        </div>
        <div v-show="ite.Approver_Result=='拒绝'||ite.Approver_Result=='移交'" style=" background-color: #f1f1f1; border-radius: 3px; padding: 5px; margin: 5px 0 10px 0; font-size: 12px;">
          {{ite.Approver_Opinions}}
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>`,
    props: ['Data'],
    computed:{
        icon() {
            return function (type) {
                if (type == "1") {
                    return "el-icon-s-check"
                } else if (type == "2") {
                    return "el-icon-s-promotion"
                } else {
                    return ""
                }
            }
        },
        mark() {
            return function (type) {
                if (type == "1") {
                    return "会签"
                } else if (type == "2") {
                    return "或签"
                } else if (type == "3") {
                    return "依次审批"
                }
            }
        },
        ResultTotal() {
            return function(item,index){
                if (item.Current_Node_Approver_Type == '1') {//审批人
                    if (item.userlist.length > 1) {//人多
                        if (item.examineMode=='1') {//会签
                            if (!item.userlist.some(i=>i.Approver_Result=='拒绝')){
                                if (!item.userlist.some(i=>i.Approver_Result=='')){
                                    return {color:'#409EFF',icon:'el-icon-success',text:'已同意'}
                                }
                            }else{
                                return {color:'#F56C6C',icon:'el-icon-warning',text:'已拒绝'}
                            }
                        } else if(item.examineMode=='2'){//或签
                            if (item.userlist.some(i=>i.Approver_Result=='同意'||i.Approver_Result=='自动同意')) {
                                return {color:'#409EFF',icon:'el-icon-success',text:'已同意'}
                            } else if(item.userlist.some(i=>i.Approver_Result=='拒绝')){
                                return {color:'#F56C6C',icon:'el-icon-warning',text:'已拒绝'}
                            }
                        }
                    } else {//单人
                        if( item.userlist[0].Approver_Result == '同意' || item.userlist[0].Approver_Result == '自动同意'){
                            return {color:'#409EFF',icon:'el-icon-success',text:'已同意'}
                        }else if(item.userlist[0].Approver_Result == '拒绝'){
                            return {color:'#F56C6C',icon:'el-icon-warning',text:'已拒绝'}
                        }
                    }
                    let arr = this.data.filter(i=>i.Current_Node_Approver_Type!='0')[index-1]
                    if (arr&&!arr.userlist.some(i=>i.Approver_Result=='拒绝')&&(!arr.userlist.some(i=>i.Approver_Result=='')&&arr.examineMode =='1'||
                        arr.examineMode =='2'&&arr.userlist.some(i=>i.Approver_Result!=''))||index==0) {
                        return {color:'#909399',icon:'',text:'审批中'}
                    }
                }else if (item.Current_Node_Approver_Type == '2') {//抄送人
                    let arr = this.data.filter(i=>i.Current_Node_Approver_Type!='0')[index-1]
                    if (this.ResultTotal(arr,index-1).text == '已同意') {
                        return {color:'#409EFF',icon:'',text:'已抄送'}
                    } 
                }
                return {color:'#909399',icon:'',text:''}
            }
        },
        Result(){
            return function(str,item){
                if (str == '同意'||str == '自动同意'&&(item.examineMode!='2'||item.userlist.length==1&&item.examineMode=='2')) {
                    return {color:'#409EFF',icon:'el-icon-success',text:'已同意'}
                }else if(str == '拒绝'){
                    return {color:'#F56C6C',icon:'el-icon-warning',text:'已拒绝'}
                }else if(str == '移交'){
                    return {color:'#E6A23C',icon:'el-icon-info',text:'已转交'}
                } else {
                    return {color:'#909399',icon:'',text:''}
                }
            }
        },
        getTime(){
            return function(str){
                try {
                    let data = new Date(str)
                    return `${(data.getMonth()+1)}/${data.getDate()} ${data.getHours()}:${data.getMinutes()}`
                } catch (error) {
                    return ''
                }
            }
        },
        data(){
            let newArr = []
            this.Data.forEach(item=>{
                let obj = {
                    Approver_User_Id: item.Approver_User_Id,
                    name: item.name,
                    Approver_Result:item.Approver_Result,
                    Approver_Opinions:item.Approver_Opinions,
                    Approver_Time:item.Approver_Time
                }
                let bln = true;
                for (let i = 0; i < newArr.length; i++) {
                    if (newArr[i].Node_id==item.Node_id) {
                        newArr[i].userlist.push(obj)
                        bln = false
                        break;
                    }
                }
                if (bln){
                    newArr.push({ 
                        Node_id: item.Node_id,
                        examineMode: item.examineMode,
                        Current_Node_Approver_Type:item.Current_Node_Approver_Type,
                        Node_name: item.Node_name, 
                        userlist: [obj]
                    })
                }
            })
            return newArr;
        }
    },
})